<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: palevioletred;
            overflow: auto;  
            /* 自动添加滚动条 */
        }
    </style>
</head>
<body>
    <div>
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内s容
        我是内容
        我是内容s
        我是内容
        我是内容
        我是内容我是内容
        我是内容
        我是内容我是内容
        我是内容
        我是内容我是内容
        我是内容
        我是内容我是内容
        我是内容
        我是内容我是内容
        我是内容
        我是内容s
    </div>
    <script>
        var div = document.querySelector('div');
        //element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
        div.addEventListener('scroll',function(){
             console.log(div.scrollTop);
        })
           
        //element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位
        console.log(div.scrollLeft);
        //element.scrollWidth 返回自身实际的宽度（内容的宽度）， 不包含边框包含padding返回数值不带单位
        console.log(div.scrollWidth);
        //element.scrollheight 返回自身实际的高度，返回数值不带单位
        console.log(div.scrollHeight);
    </script>
</body>
</html>